<template>
	<view class="vip_change">
		<topNav rightText="金币兑换" @rightBtn="$navTo('./goldChange')">
			<template slot="middle">
				<text>金币充值</text>
			</template>
		</topNav>
		<view class="top_changes f f_align f_align_center">
			<view class="gold_e f f_align f_column">
				<text>金币余额</text>
				<text class="bold gold">{{userInfo.accountEntity.goldCoinAmount}}</text>
			</view>
			<view class="f f_align f_column">
				<text>兑换比例：10金币/元</text>
				<text class="dj_gold">冻结金币：0</text>
			</view>
		</view>

		<view class="vip_w_change">
			<view class="f f_align_center f_warp vip_f_card_l">
				<view class="vip_w_item"
					v-for="(item,index) in cashAmountArr"
					:key="index"
				>
					<view
						:class="item == cashAmount ? 'bold vip_item_col active' : 'bold vip_item_col'"
						@click="cashAmount = item"
					>{{item}}元</view>
				</view>
				<view class="vip_w_item">
					<view :class="showDays ? 'bold vip_item_col active' : 'bold vip_item_col'" @click="showDays = !showDays">自定义</view>
				</view>
			</view>
			<input class="input_www" v-if="showDays" @input="chageVal" v-model.trim="cashAmount" type="number" placeholder="请输入充值金额" />

			<view class="f f_column f_align vip_f_card_meth">
				<view class="f f_align f_align_center">
					<view class="f f_align_center">
						<i class="iconfont alipay">&#xe6fd;</i>
						<view>支付宝</view>
					</view>
					<i v-if="rechargeChannel == '10002002'" class="iconfont iconzu5501"></i>
					<i v-else class="iconfont iconjianqu21"></i>
				</view>
				<!-- <view class="f f_align f_align_center">
					<view class="f f_align_center">
						<i class="iconfont wx">&#xe6ef;</i>
						<view>微信支付</view>
					</view>
					<i class="iconfont iconjianqu21"></i>
				</view> -->
			</view>
		</view>

		<view class="biding_btn bold" @click="createdOrder">
			立即充值
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDays:false,
				cashAmountArr:[30,50,100,200,500],
				cashAmount:0,
				rechargeChannel:'10002002',
				userInfo:{
					accountEntity:{
						goldCoinAmount:0
					}
				},


			};
		},
		onShow() {
			this.getUserInfo();
		},
		methods:{
			//获取用户信息哦
			async getUserInfo(){
				const _this = this;
				let res = (await _this.$http('/api/auth/user/getUserInfo','POST',{})).data;
				uni.stopPullDownRefresh();
				if(res && res.code == '0'){
					let userInfo = res.data;
					_this.userInfo = userInfo;
					uni.setStorageSync('userInfo',userInfo);
				}
			},
			chageVal(e){
				const _this = this;
				let val = e.target.value;
				setTimeout(()=>{
					if(val != ''){
						let n = Math.abs(parseInt(val));
						_this.cashAmount = n;
					}
				},200);
			},
			async createdOrder(){
				const _this = this;
				if(_this.cashAmount <= 0){
					return _this.$showToast('充值金额必须是大于0哦～')
				}
				let res = (await _this.$http('/api/auth/user/recharge/order/createOrder','POST',{
					cashAmount:_this.cashAmount,
					rechargeChannel:_this.rechargeChannel
				})).data;

				if(res && res.code == '0'){
					_this.$alipay(res.data).then(res=>{
						//支付成功
						_this.cashAmount = 0;
						_this.getUserInfo();
					});
				}else{
					_this.$showToast(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vip_change{
		width: 100%;

		input.input_www{
			width: 100%;
			padding: 24rpx 0;
			width: 90%;
			padding: 0 24rpx;
			height: 70rpx;
			border-radius: 8rpx;
			border: solid 1rpx #E6E6E6;
			margin-right: 20rpx;
		}
		.top_changes{
			box-sizing: border-box;
			width: 100%;
			height: 330rpx;
			background: url('/static/image/vip_bg@2x.png') no-repeat center center;
			background-size: 100% 100%;
			color: #fff;
			font-size: 24rpx;
			padding: 0 88rpx;
			.gold_e{
				.gold{
					font-size: 64rpx;
					margin-top: 14rpx;
				}
			}
			.dj_gold{
				margin-top: 32rpx;
			}
		}
		.vip_w_change{
			padding: 0 24rpx 24rpx;
			.vip_f_card_l{
				border-bottom: solid 1rpx #EEEEEE;
				padding-bottom: 13rpx;
				.vip_w_item{
					width: 33.333%;
					font-size: 32rpx;
					color: #333333;
					@include flex_center;
					margin-bottom: 32rpx;
					.vip_item_col{
						width: 202rpx;
						height: 110rpx;
						border: solid 2rpx #EEEEEE;
						@include flex_center;
						border-radius: 4rpx;
						&.active{
							border-color:$ych_color;
							color: $ych_color;
						}
					}
				}
			}
			.vip_f_card_meth{
				height: 110rpx;
				padding:60rpx 0;
				border-bottom: solid 1rpx #EEEEEE;
				font-size: 28rpx;
				color: #333;
				.alipay,.wx{
					font-size: 36rpx;
					margin-right: 28rpx;
				}
				.alipay{
					color: #43ADFF;
				}
				.wx{
					color: #34C56D;
				}
				.iconzu5501{color: $ych_color;}
				.iconjianqu21{color: #979797;}
			}
		}
		.biding_btn{
			width: 606rpx;
			height: 88rpx;
			background-color: $ych_color;
			border-radius: 12rpx;
			font-size: 30rpx;
			color: #fff;
			@include flex_center;
			margin:140rpx auto;
			@include box_shadow_btn;
		}
	}
</style>
